<template>
    <div class="main-content">
        <div class="influence-content">
            <div class="w1200 section">
                <h2 class="headline">一站式智慧运营管理解决方案，众多驾校数字化转型的口碑之选</h2>
                <ul class="metrics">
                    <li class="metric">
                        <span class="pill">驾校数量</span>
                        <div class="value"><span class="num">500</span><span class="suffix">+</span></div>
                        <div class="note">
                            <div>已入驻驾校数量</div>
                            <!-- <div>单集群峰值1万节点</div> -->
                        </div>
                    </li>
                    <li class="metric">
                        <span class="pill">学员人数</span>
                        <div class="value"><span class="num">60000</span><span class="suffix">+</span></div>
                        <div class="note">
                            <div>已报名学员人数</div>
                            <!-- <div>单车输出100PB渲染数据</div> -->
                        </div>
                    </li>
                    <li class="metric">
                        <span class="pill">教练人数</span>
                        <div class="value"><span class="num">2000</span><span class="suffix">+</span></div>
                        <div class="note">
                            <div>已入驻教练人数</div>
                            <!-- <div>覆盖200万+终端用户</div> -->
                        </div>
                    </li>
                    <li class="metric">
                        <span class="pill">运营效率</span>
                        <div class="value"><span class="num">60</span><span class="unit">%</span><span
                                class="suffix">+</span></div>
                        <div class="note">
                            <div>已提升驾校运营效率</div>
                            <!-- <div>覆盖200万+终端用户</div> -->
                        </div>
                    </li>
                </ul>
            </div>

            <div class="certs">
                <div class="w1200">
                    <ul class="logo-list">
                        <li class="logo-item">
                            <img src="https://image.lutongjiakao.com/system/c7bd97bc74e8481a89ef2d79a57f8228.png"
                                alt="">
                            <div>
                                ISO9001 质量管理体系认证证书
                            </div>
                        </li>
                        <li class="logo-item">
                            <img src="https://image.lutongjiakao.com/system/3fb963b1fa21473d976b85eade0d76c4.png"
                                alt="">
                            <div>ISO27001 信息安全管理体系认证证书</div>
                        </li>
                        <li class="logo-item">
                            <img src="https://image.lutongjiakao.com/system/451bab8bf27c4c628a22a5cddc412df8.png"
                                alt="">
                            <div>
                                公安部等保三级备案
                            </div>
                        </li>

                        <li class="logo-item">
                            <img src="https://image.lutongjiakao.com/system/6c26a71440314109b7e178d4c0bb1e65.png"
                                alt="">
                            <div>
                                高新技术企业证书
                            </div>
                        </li>
                        <li class="logo-item">
                            <img src="https://image.lutongjiakao.com/system/62f7f667372d4c28bd918642063e12dd.png"
                                alt="">
                            <div>
                                软件企业证书
                            </div>
                        </li>
                        <li class="logo-item">
                            <img src="https://image.lutongjiakao.com/system/34ac56f2036c4c96bf2c908375bc89dd.png"
                                alt="">
                            <div>
                                中国交通运输协会会员单
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <partner />

        <div class="behavior">
            <div class="w1200">
                <p>
                    <span class="brand-name">绿通云—</span>
                    <span class="slogan">智慧驾校PaaS平台</span>
                </p>
                <p>
                    <span class="slogan">全方位提升驾校运营管理效率，</span>
                    <span class="brand-name">全面赋能驾校降本增效</span>
                </p>
                <div class="cta-section">
                    <el-button type="primary" class="try-button" @click="showConsult = true">
                        立即咨询
                        <el-icon class="ml-2">
                            <ArrowRight />
                        </el-icon>
                    </el-button>
                </div>
            </div>
        </div>

        <div class="content-center">
            <div class="w1200">
                <h2 class="content-center-title">行业动态</h2>
                <div class="content-cards">
                    <div v-for="(card, index) in groupedConsultList" :key="index" class="content-card">
                        <div class="card-header">
                            <img :src="card.img" alt="" class="card-image">
                            <h3 class="card-title">{{ card.category }}</h3>
                        </div>
                        <ul class="content-list">
                            <li v-for="(item, index) in card.items" :key="index" class="content-item cursor"
                                @click="toNewsInfo(item.id)">
                                <span class="date">{{ item.publishTime.slice(5, 10) }}</span>
                                <span class="title">{{ item.title }}</span>
                            </li>
                        </ul>
                        <div class="promotion-action" @click="toNews">
                            <div class="marR10">查看更多</div>
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <consult v-if="showConsult" @close="showConsult = false" />
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import partner from './partner.vue';
import consult from '@/components/consult.vue';
import { getArticleList, ArticleGroup } from '@/api/index'
import router from '@/router';
import { useUserStore } from '@/store/user'

const showConsult = ref(false);
const consultList = ref<any>([])
const categories = ref<any>([])
const groupedConsultList = ref<any>([])
const userStore = useUserStore()

const getData = async () => {
    const res = await getArticleList({
        pageNum: 1,
        pageSize: 8
    })
    if (res.code === '0') {
        consultList.value = res.data.list
        userStore.setNewsList(res.data.list)
        groupConsultByCategory()
    }
}

const getArticleGroupList = async () => {
    const res = await ArticleGroup({
        pageNum: 1,
        pageSize: 10
    })
    if (res.code === '0') {
        categories.value = res.data
        groupConsultByCategory()
    }
}

const groupConsultByCategory = () => {
    if (!consultList.value.length || !categories.value.length) return
    groupedConsultList.value = categories.value.map((cat: any) => {
        return {
            category: cat.name,
            img: cat.id === '12' ? 'https://image.lutongjiakao.com/system/ca17fd0059f444d9b950ffa9a87bb132.png' :
                cat.id === '13' ? 'https://image.lutongjiakao.com/system/a62ffdfe831340d387f641760601c621.png' :
                    'https://image.lutongjiakao.com/system/c5e52db8d80d42abb860b5bde9b2b3ba.png',
            items: consultList.value.filter((item: any) => item.groupId === cat.id).slice(0, 4)
        }
    })
}
const toNews = () => {
    router.push('/news')
}
const toNewsInfo = (id: string) => {
    router.push({
        name: 'newsInfo',
        query: { id }
    })
}
onMounted(() => {
    getData();
    getArticleGroupList();
})
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.w1200 {
    width: rem(910);
    margin: 0 auto;
}

.influence-content {
    // height: rem(450);
    // background-image: url('https://xuantu.renderbus.com/_next/static/media/record-bg.40f18414.png');
    background: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    padding: rem(70) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section {
    text-align: left;
}

.headline {
    font-size: rem(26);
    font-weight: 700;
    color: #1f2533;
    margin-bottom: rem(50);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: rem(20);
    list-style: none;
    padding: 0;
    margin: 0;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pill {
    display: inline-block;
    height: rem(30);
    line-height: rem(30);
    padding: 0 rem(16);
    width: rem(76);
    text-align: center;
    color: rgb(17, 200, 113);
    font-size: rem(11);
    font-weight: 600;
    background: url('https://xuantu.renderbus.com/_next/static/media/bubble.09605e1d.webp') no-repeat center / 100% 100%;
}

.value {
    display: flex;
    align-items: baseline;
    color: #1f2533;
    margin-bottom: rem(6);
}

.num {
    font-size: rem(44);
    font-weight: 700;
    color: rgb(37, 207, 107);
}

.unit {
    font-size: rem(26);
    margin-left: rem(4);
    font-weight: 700;
    color: rgb(89 89 89/var(--tw-text-opacity, 1));
}

.suffix {
    font-size: rem(24);
    margin-left: rem(2);
    font-weight: 600;
    color: rgb(89 89 89/var(--tw-text-opacity, 1));
}

.note {
    font-size: rem(12);
    color: #6b7280;
    line-height: rem(18);
    width: rem(235);
}

.certs {
    margin-top: rem(120);
}

.logo-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: rem(30);
    list-style: none;
    padding: rem(16);
    margin: 0;
    // background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .4), #fff);
    background-color: #fff;
    border-radius: rem(12) rem(12) 0 0;
    box-shadow: 0 6px 24px rgba(31, 37, 51, 0.06);
}

.logo-item {
    // height: rem(90);
    text-align: center;
    font-size: rem(10);

    img {
        width: rem(54);
        height: rem(54);
        margin-bottom: rem(10);
    }
}

.logo-item:nth-child(8n) {
    border-right: none;
}

.customers {
    padding: rem(80) 0 0;
}

.customers-title {
    text-align: center;
    font-size: rem(26);
    font-weight: 800;
    color: #1f2533;
}

.customers-subtitle {
    text-align: center;
    margin-top: rem(10);
    margin-bottom: rem(26);
    color: #595959;
    font-size: rem(13);
}

.brand-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: rem(18);
}

.brand-card {
    height: rem(70);
    background: #fff;
    border-radius: rem(8);
    box-shadow: 1px 1px 8px #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-card img {
    max-width: 70%;
    max-height: 60%;
}

.behavior {
    background-size: cover;
    // background-image: url('https://xuantu.renderbus.com/_next/static/media/advantage-bg.e2a77b05.webp');
    background-image: url('https://image.lutongjiakao.com/system/2ce90aa7c8d148c08b918ced30f39063.jpg');
    // background: linear-gradient(rgb(255, 255, 255) 1.56%, rgba(255, 255, 255, 0) 26.12%), linear-gradient(90deg, rgba(216, 245, 234, 0.6) 0%, rgba(241, 249, 253, 0.6) 51.84%, rgba(219, 240, 255, 0.6) 99.69%);
    height: rem(240);
    margin-top: rem(95);
    padding: rem(50) 0;
}

.cta-section {
    display: flex;
    align-items: center;
    margin-top: rem(20);

    .try-button {
        background: linear-gradient(90deg, rgb(15, 210, 183) 0%, rgb(37, 207, 107) 100%);
        border: none;
        border-radius: rem(25);
        width: rem(115);
        height: rem(32);
        font-size: rem(12);
        font-weight: 400;
        display: flex;
        align-items: center;

        .ml-2 {
            margin-left: rem(15);
        }

        &:hover {
            background: linear-gradient(90deg, rgb(37, 207, 107) 0%, rgb(15, 210, 183) 100%);
        }
    }
}

.brand-name,
.slogan {
    font-weight: 700;
    font-size: rem(28);
}

.brand-name {
    color: #1f2329;
}

.slogan {
    color: rgb(37, 207, 107);
}

.content-center {
    background: #fff;
    // background: linear-gradient(rgb(255, 255, 255) 1.56%, rgba(255, 255, 255, 0) 26.12%), linear-gradient(90deg, rgba(216, 245, 234, 0.6) 0%, rgba(241, 249, 253, 0.6) 51.84%, rgba(219, 240, 255, 0.6) 99.69%);
    padding: rem(80) 0;
}

.content-center-title {
    text-align: center;
    font-size: rem(28);
    font-weight: 700;
    color: #1f2533;
    margin-bottom: rem(50);
}

.content-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: rem(25);
}

.content-card {
    background: #fff;
    border-radius: rem(8);
    box-shadow: 0 rem(4) rem(20) rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-header {
    position: relative;
    height: rem(120);
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-title {
    position: absolute;
    left: rem(20);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: rem(18);
    font-weight: 700;
    // color: #1f2533;
    color: #fff;
}


.content-list {
    list-style: none;
    padding: rem(20) rem(20) 0 rem(20);
    min-height: rem(120);
}

.content-item {
    display: flex;
    align-items: center;
    padding-bottom: rem(8);

    &:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .date {
        font-size: rem(10);
        color: #999;
        margin-right: rem(5);
        flex-shrink: 0;
    }

    .title {
        font-size: rem(10);
        color: #141414;
        line-height: 1.4;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:hover {
            color: rgb(17, 200, 113);
            font-weight: bold;
            transform: translateX(rem(1));
        }
    }
}

.promotion-action {
    font-size: rem(10);
    color: rgb(17, 200, 113);
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: rem(24);
    padding: rem(5) rem(10);
    margin: rem(15) rem(80);

    &:hover {
        color: #fff;
        background: linear-gradient(270deg, rgb(15, 210, 183) 0%, rgb(37, 207, 107) 100%);
        box-shadow: 0 rem(4) rem(12) rgba(39, 137, 255, 0.3);
    }

    .marR10 {
        margin-right: rem(10);
        font-weight: 500;
    }
}
</style>